<template>
  <div class="dashboard">
    <div class="header">
      <h1>房屋租赁系统数据大屏</h1>
      <p>{{ currentDate }}</p>
    </div>
    <div class="charts">
      <ECharts v-if="userStatsOptions" :options="userStatsOptions" class="chart" />
      <ECharts v-if="roomStatsOptions" :options="roomStatsOptions" class="chart" />
      <ECharts v-if="orderVolumeOptions" :options="orderVolumeOptions" class="chart" />
      <ECharts v-if="orderAmountOptions" :options="orderAmountOptions" class="chart" />
      <ECharts v-if="mapDistributionOptions" :options="mapDistributionOptions" class="map" />
    </div>
  </div>
</template>

<script>
import ECharts from '../Breadcrumb/components/ECharts';
import axios from 'axios';
import * as echarts from 'echarts';

export default {
  components: {
    ECharts,
  },
  data() {
    return {
      currentDate: new Date().toLocaleString(),
      userStatsOptions: {
        title: { text: '用户统计' },
        tooltip: {},
        series: [
          {
            name: '用户状态',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 170, name: '在线用户数' },
              { value: 50, name: '离线用户数' },
              { value: 220, name: '总用户数' },
            ],
          },
        ],
      },
      roomStatsOptions: {
        title: { text: '房间统计' },
        tooltip: {},
        series: [
          {
            name: '房间状态',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 120, name: '已出租房间数' },
              { value: 30, name: '剩余房间数' },
              { value: 150, name: '房屋总数' },
            ],
          },
        ],
      },
      orderVolumeOptions: {
        title: { text: '订单成交量' },
        tooltip: {},
        xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月'] },
        yAxis: { type: 'value' },
        series: [
          { name: '订单量', type: 'bar', data: [50, 200, 360, 100, 300] },
        ],
      },
      orderAmountOptions: {
        title: { text: '订单成交金额' },
        tooltip: {},
        xAxis: { type: 'category', data: ['一月', '二月', '三月', '四月', '五月'] },
        yAxis: { type: 'value' },
        series: [
          { name: '成交金额', type: 'line', data: [5000, 20000, 36000, 10000, 30000] },
        ],
      },
      mapDistributionOptions: null,
    };
  },
  mounted() {
    this.loadMapData();
  },
  methods: {
    loadMapData() {
      axios.get('https://geo.datav.aliyun.com/areas/bound/100000_full.json')
        .then(response => {
          echarts.registerMap('china', response.data);
          this.mapDistributionOptions = {
            title: { text: '房源分布图' },
            tooltip: {
              trigger: 'item',
              formatter: '{b}<br/>{c} (个)',
            },
            visualMap: {
              min: 0,
              max: 1000,
              left: 'left',
              top: 'bottom',
              text: ['高', '低'],
              calculable: true,
              inRange: {
                color: ['#e0ffff', '#006edd'],
              },
            },
            series: [
              {
                name: '房源分布',
                type: 'map',
                map: 'china',
                roam: true,
                label: {
                  show: true,
                },
                data: [
                  { name: '北京', value: 500 },
                  { name: '上海', value: 400 }
                  ],
              },
            ],
          };
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
                
